<template>
  <div class="login-container">
    <el-form
        class="login-form"
        ref="formRef"
        :rules="rules"
        :model="form"
        @validate="handleValidate"
    >
      <el-form-item style="align-items: center">
        <h2 style="margin: 0px">用户登录</h2>
      </el-form-item>
      <el-form-item prop="userName">
        <el-input v-model="form.userName" placeholder="用户名"/>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" placeholder="密码"/>
      </el-form-item>
      <el-form-item>
        <el-button style="width: 100%;" type="primary" @click="onSubmit()">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import axios from '../utils/request'
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {login} from '../api/login'

const router = useRouter();

const formRef = ref(null)
const form = ref({
  userName: '',
  password: ''
})

const rules = {
  userName: [
    {required: true, message: '请输入用户名', trigger: 'change'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'change'},
  ]
}

const onSubmit = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      let res = await login(form.value);
      let {code, msg,data} = res;
      if (code == '00') {
        //跳转
        console.log('登录成功')
        router.push('/index')
      }
    } else {
      return false;
    }
  })
}

</script>
<style>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使用视口高度来使容器充满整个屏幕 */
}

.login-form {
  background-color: white;
  padding: 40px;
  border-radius: 5px;
  width: 300px;
}
</style>